<template>
  <el-drawer
      ref="flowRootDrawer"
      direction="rtl"
      v-model="visible"
      :before-close="handleClose"
  >
    <template #header>
      <span class="flow-ant-drawer-title">
      <el-icon><EditPen/></el-icon>
        <!-- <EditName v-model:value="node.name"/> -->
        <el-input ref="imputRef" v-if="isInput" type="text" autofocus @blur="isInput = false"
              v-model="node.name" :style="{ width: width }"/>
            <span v-else @click.stop="clickEvent()">{{ node.name }}</span>
      </span>
    </template>
    <div class="flow-setting-module">
      <div class="flow-setting-content">
        <div class="flow-setting-item">
          <p class="flow-setting-item-title">表单权限</p>
          <AuthForm v-model:value="node.config.formPerms" readable/>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script setup name="FlowRootDrawer">
import {flowMixin} from '../../../mixins/flowMixin';
import FlowDrawerFooter from '../../../common/DrawerFooter.vue';
import EditName from '../../../common/EditName.vue';
import AuthForm from "../../../common/FormAuthConfig.vue";
//import AuthForm from '../../../common/AuthForm.vue';
//import flowhook from '../../../mixins/flowhook';
import {
  reactive,
  ref,
  createApp,
    nextTick,
  watch,
  
  computed,
  onMounted,
  toRefs,
  defineExpose,
  getCurrentInstance
} from "vue";
import {useStore} from 'vuex';
/* 组件局部注册 */
const store = useStore();
const emit = defineEmits(['close'])

//const {uuid, nameClass, delNode, drawerWidth, ccIcon} = flowhook();

const {currentInstance, proxy} = getCurrentInstance();


const visible = ref(false)
const node = ref({})


const afterVisibleChange = (val) => {
  console.log('visible', val);
}

const showDrawer = (data) => {
  visible.value = true;
  node.value = data;
  // console.log("这里是mc root抽屉弹窗-------->", visible.value, JSON.stringify(node));
}

const onClose = () => {
  visible.value = false;
  emit('close');
}

const handleClose = () => {
  console.log("node-配置信息保存----config>", JSON.stringify(node.value))
  console.log("这个?????????????", node.value.config.formPerms.length)

  // 更新节点显示信息
  if (node.value.config?.formPerms?.length > 0) {
    console.log("node-配置信息保存----config>", JSON.stringify(node.value))
    store.dispatch('process/updateNode', {currNode: node.value, field: 'content', value: '已设置'});
    // store.dispatch('process/updateNode', { currNode: node.value, field: 'error', value: false });
  } else {
    store.dispatch('process/updateNode', {currNode: node.value, field: 'content', value: null});
    // store.dispatch('process/updateNode', { currNode: node.value, field: 'error', value: false });
  }
  onClose();
}
const imputRef = ref();
const clickEvent = () => {
  isInput.value = true;
}
const isInput = ref(false);
watch(isInput, () => {
  if (isInput.value) {
    nextTick(() => {
      imputRef.value.focus()
    })
  }
})

defineExpose({
  showDrawer
});
</script>
